<template>
	<div class="banner">
		<!-- 隐藏菜单 -->
		<div class="slider"></div>
		<!-- 主界面 -->
		<div class="main">
			<!-- 顶部 -->
			<div class="banner-top">
				<!-- 城市切换 -->
				<div class="city">
					<router-link to="/citys">
						<label>{{cityName}}</label><i class="iconfont">&#xeb6d;</i>
					</router-link>
				</div>
				<!-- 搜索 -->
				<form class="search">
					<i class="iconfont">&#xe63d;</i>
					<input type="text" placeholder="泰国" />
				</form>
				<!-- 列表区域 -->
				<div class="hot">
					<aside>热搜</aside>
					<aside>赏银杏</aside>
					<aside>赏枫叶</aside>
					<aside>秋日骑行</aside>
					<aside>温泉滑雪</aside>
				</div>
			</div>
			
			<!-- 轮播区域 -->
			<div class="swiper banner-swiper">
				<ul class="swiper-wrapper">
				<li class="swiper-slide"  v-for="item in imgs" :key="item.id">
					<img :src="require('@/'+item.image)" >
				</li>
				</ul>
				<div class="swiper-pagination"></div> <!-- 分页器，如果放置在swiper外面，需要自定义样式 -->
			</div>
			
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	// 2.引入swiper的动态组件
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	}from 'swiper';
	//3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination]);
	
	export default{
		name:'Banner',
		props:['ba_list'],
		data(){
			return{
				imgs:this.ba_list,
			}
		},
		computed:{
			...mapState(['cityName']),
		},
		watch:{
			ba_list(){
				this.imgs=this.ba_list
			}
		},
		updated() {
			new Swiper('.banner-swiper',{
				// 循环播放
				loop:true,
				// 设置分页器效果
				pagination:{
					el:'.swiper-pagination'
				},
				// 设置播放项：时间，不停止，不暂停（手指经过不暂停自动）
				autoplay:{
					delay:3000,
					stopOnLastSlide:false,
					disableOnInteraction:false,
				}
			})
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.hot{
		position: absolute;
		display: flex;
		width: 100%;
		margin-top: 2rem;
	}
	.hot aside{
		width: 20%;
		margin: 0 0.2rem;
		line-height: 0.5rem;
		border-radius: 0.5rem;
		background-color:rgba(234, 234, 234, 0.9);
		text-align: center;
	}
	.hot aside:nth-child(1){
		background-color:#ffdd40;
	}
	.main{
		position: relative;
		width: 100%;
		background-color: #ffdd40;
		height: 5.3rem;
	}
	/* 顶部样式 */
	.banner-top{
		position: absolute;
		left: 0;
		top: 0.2rem;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 0.8rem;
	}
	.banner-top .city{
		font-size: 0.35rem;
		line-height: 0.8rem;
		padding-left: 0.3rem;
		padding-right: 0.4rem;
	}
	.banner-top .city i{
		vertical-align: middle;
		padding-left: 0.1rem;
	}
	.banner-top .search{
		flex: 1;
		background-color: white;
		border-radius: 0.5rem;
		overflow: hidden;
		line-height: 0.8rem;
		margin-right: 0.3rem;
	}
	.banner-top .search i{
		display: inline-block;
		height: 100%;
		font-size: 0.45rem;
		padding-left: 0.2rem;
	}
	.banner-top .search input{
		border: none;
		width: 80%;
		line-height: 0.7rem;
		text-indent: 0.3rem;
		outline: none;
	}
	.banner-top .slider-btn{
		color: white;
		padding-left: 0.4rem;
		padding-right: 0.3rem;
		line-height: 0.8rem;
		vertical-align: middle;
	}
	/* 轮播区域的样式 */
	.banner-swiper{
		position: absolute;
		margin: 0 auto;
		width: 95%;
		height: 4rem;
		border-radius: 0.3rem;
		margin-top: 2rem;
		left: 50%;
		margin-left: -47.5%;
	}
	.banner-swiper img{
		width: 100%;
		height: 100%;
	}
	/* 穿透 */
	.swiper-pagination >>> .swiper-pagination-bullet-active{
		border-radius: 0.2rem;
		background-color: #ffdd40;
		animation: .25s bulletwidth linear forwards;
		/* 设置动画执行时间，动画名，匀速，不停止 */
	}
	@keyframes bulletwidth{
		from{
			width: 0.2rem;
		}
		to{
			width: 0.5rem;
		}
	}
</style>
